<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 20px">
          <el-input
              placeholder="请输入设备名称"
              v-model="name"
              clearable>
          </el-input>
          <template>
            <el-select v-model="industryId" placeholder="请选择设备行业">
              <el-option
                  v-for="industry in list"
                  :key="industry.industryId"
                  :label="industry.name"
                  :value="industry.industryId">
              </el-option>
            </el-select>
          </template>
          <template>
            <el-select v-model="deviceType" placeholder="请选择设备类型">
              <el-option
                  v-for="deviceType in devicesTypeBean.list"
                  :key="deviceType.deviceType"
                  :label="deviceType.name"
                  :value="deviceType.deviceType">
              </el-option>
            </el-select>
          </template>
          <el-button type="primary" @click.prevent="fnLoadData(1)">查询</el-button>
          <el-button type="danger"  @click.prevent="fnRestFrom">
            <i class="el-icon-refresh-left" ></i>清空
          </el-button>
          <el-button  type="primary" @click="fnAdd">新增</el-button>
    </el-row>
    <el-table
        :data="bean.list"
        border
        with="700px"
        style="text-align: center">
      <el-table-column
          fixed
          prop="id"
          label="设备类型ID"
          :span="3">
      </el-table-column>
      <el-table-column
          fixed
          prop="name"
          label="设备类型名称"
          :span="3">
    </el-table-column>
      <el-table-column
          prop="industryName"
          label="所属行业"
          :span="3">
      </el-table-column>
      <el-table-column
          prop="deviceType"
          label="设备类型"
          :span="3">
        <template slot-scope="{row}">
        <span v-if="row.deviceType === 1">网关</span>
        <span v-else-if="row.deviceType === 2">传感器</span>
        <span v-else-if="row.deviceType === 3">继电器</span>
        <span v-else>摄像头</span>
      </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建日期"
          :span="4">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="修改日期"
          :span=4>
      </el-table-column>
      <el-table-column
          label="操作"
          :span="1">
        <template slot-scope="scope">
          <el-button  @click="fnUpdate(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="fnLoadData"
        :current-page.sync="page"
        :page-size="bean.pageSize"
        :total="bean.total">
    </el-pagination>
    <device-type-add ref="deviceTypeAddDialog" :list=list :devicesTypeBean="devicesTypeBean"  @closed="fnRestFrom"/>
    <device-type-edit ref="deviceTypeEditDialog"  :devicesTypeBean="devicesTypeBean"  @closed="fnRestFrom"/>
  </div>
</template>

<script>
import DeviceTypeAdd from "@/components/DeviceTypeAdd.vue";
import DeviceTypeEdit from "@/components/DeviceTypeEdit.vue";
export default {
  name: "DeviceTypeManagementView",
  components: {
    DeviceTypeAdd,
    DeviceTypeEdit
  },
  methods: {
    fnUpdate(row){
      console.log('222222'+row.id);
      let deviceTypeEditDialog = this.$refs.deviceTypeEditDialog;
      deviceTypeEditDialog.fnLoadData(row.id)
      this.$refs.deviceTypeEditDialog.visible=true;
    },
    fnAdd(){
      this.$refs.deviceTypeAddDialog.visible=true;
    },
    fnLoadData(){
      this.axios.get("http://localhost:8080/devices/devicesTypeList", {
        params: {
          name:this.name,
          industryId:this.industryId,
          deviceType:this.deviceType,
          page:this.page
        }})
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
              console.log(this.bean);
            }
          });
    },
    fnRestFrom(p){
      this.axios.get("http://localhost:8080/devices/devicesTypeList", {params: {  p } })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
              console.log(this.bean);
            }
          });
    }
  },

  data() {
    return {
      bean:{
        list:[]
      },
      page:1,
      devicesTypeBean:{
        list:[]
      },
      deviceType:'',
      industryId:'',
      list:[],
      name:'',
      userInfo:{}
    }
  },
  mounted() {
    this.fnLoadData();
    this.axios.get("http://localhost:8080/industry/industryList")
        .then(res=>{
          console.log(res)
          if (res.data.code === "200"){
            this.$message.success("查询成功");
            this.list = res.data.data;
          }
        });
    this.axios.get("http://localhost:8080/devices/devicesTypeList")
        .then(res=>{
          console.log(res)
          if (res.data.code === "200"){
            this.$message.success("查询成功");
            this.devicesTypeBean = res.data.data;
          }
        });
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
  width:150px;
}

.el-button {
  margin-right: 10px;
}
</style>

